<template>
  <div class="container">
    <div class="header">
      <img class="pic" src="@/assets/img/header-pic.png">
      <div class="desc">
        <div class="logo">
          <img src="../assets/img/logo.png">
        </div>
        <div class="time">{{cur_time}}</div>
      </div>
    </div>
    <div class="content">
      <div class="section left">
        <div class="group g1 mb2">
          <img src="../assets/img/rect-left-t.png" class="poa-src">
          <div class="boxstyle">
            <div class="box total">
              <p class="titlep">访问总量</p>
              <p class="num">1500</p>
              <p class="compare">
                <span>较昨日</span>
                <img src="@/assets/img/arrow.png" class="arrow-icon up">
                <span>10人</span>
              </p>
            </div>
            <div class="box success">
              <p class="titlep">成功次数</p>
              <p class="num">1500</p>
              <p class="compare">
                <span>较昨日</span>
                <img src="@/assets/img/arrow.png" class="arrow-icon up">
                <span>10人</span>
              </p>
            </div>
            <div class="box fail">
              <p class="titlep">失败次数</p>
              <p class="num">1500</p>
              <p class="compare">
                <span>较昨日</span>
                <img src="@/assets/img/arrow.png" class="arrow-icon">
                <span>10人</span>
              </p>
            </div>
            <div class="box average">
              <p class="titlep">平均耗时</p>
              <p class="num">1500</p>
              <p class="compare">
                <span>较昨日</span>
                <img src="@/assets/img/arrow.png" class="arrow-icon">
                <span>10秒</span>
              </p>
            </div>
          </div>
        </div>

        <div class="group g4">
          <img src="../assets/img/rect-right-b.png" class="poa-src">
          <div class="title">
            <span class="line"></span>数据库实例会话
          </div>
          <div class="boxtable">
            <ul class="list">
              <li class="list-item th">
                <div class="td w30 sql">数据库</div>
                <div class="td w30 origin">来源</div>
                <div class="td w25">用户</div>
                <div class="td w15 tac">时长</div>
              </li>
            </ul>
            <ul class="list tbody_blue">
              <swiper :options="swiperOptionbox1" ref="swiperbox1">
                <swiper-slide v-for="c in 20" :key="c">
                  <li class="list-item tr">
                    <div class="td w30 sql">chlowj-13926218783</div>
                    <div class="td w30 origin">10.104.42.192</div>
                    <div class="td w25">y12926y12926y129261</div>
                    <div class="td w15 tac">{{c}}ms</div>
                  </li>
                </swiper-slide>
              </swiper>
            </ul>
          </div>
        </div>

      </div>

      <div class="section center">
        <div class="group g2 mb2">
          <img src="../assets/img/rect-center-box.png" class="poa-src">
          <div class="title">
            <span class="line"></span>服务器资源情况
          </div>
          <div class="detail">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide v-for="i in 5" :key="i">
                <div class="dt-box">
                  <div class="fl">
                    <img src="@/assets/img/service-pic.png" class="ser-pic">
                    <div class="desc">10.10.10.35</div>
                  </div>
                  <div class="fr">
                    <div class="part" :class="`part`+(d+1)" v-for="(a,d) in serviceOptions" :key="a.name">
                      <div class="text">{{a.name}}</div>
                      <div class="main-pro">
                        <div class="progress pro1">
                          <div class="span" ref="prospan">
                            <div class="bgc" :style="{width: a.prog}"></div>
                          </div>
                        </div>
                      </div>
                      <div class="shownum">{{a.prog}}</div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="group g3 mb2">
          <img src="../assets/img/rect-center-box.png" class="poa-src">
          <div class="title">
            <span class="line"></span>30天用户访问监测
          </div>
          <div id="myChartDay" class="myChart"></div>
        </div>
        <div class="group g3">
          <img src="../assets/img/rect-center-box.png" class="poa-src">
          <div class="title">
            <span class="line"></span>24小时用户访问监测
          </div>
          <div id="myChartHour" class="myChart"></div>
        </div>

      </div>

      <div class="section right">
        <div class="group g5 mb2">
          <img src="@/assets/img/rect-right-b.png" class="poa-src">
          <div class="title">
            <span class="line"></span>系统警告
          </div>
          <div class="boxtable">
            <ul class="list">
              <li class="list-item th">
                <div class="td w30">时间</div>
                <div class="td w20 tac">服务器</div>
                <div class="td w50">内容</div>
              </li>
            </ul>
            <ul class="list tbody_red swp">
              <swiper :options="swiperOptionbox1" ref="swiperbox1">
                <swiper-slide v-for="d in 20" :key="d">
                  <li class="list-item tr">
                    <div class="td w30">11-16 15:00</div>
                    <div class="td w20 tac">{{d}}</div>
                    <div class="td w50">商城接口(mall)异常</div>
                  </li>
                </swiper-slide>
              </swiper>
            </ul>
          </div>
        </div>
        <div class="group g5">
          <img src="@/assets/img/rect-right-b.png" class="poa-src">
          <div class="title">
            <span class="line"></span>24小时接口耗时排行
          </div>
          <div class="boxtable">
            <ul class="list">
              <li class="list-item th">
                <div class="td w75">接口名称</div>
                <div class="td w25 tac">平均耗时</div>
              </li>
            </ul>
            <ul class="list tbody_blue swp">
              <swiper :options="swiperOptionbox1" ref="swiperbox1">
                <swiper-slide v-for="e in 21" :key="e">
                  <li class="list-item tr">
                    <div class="td w75">商城接口(mall)异常</div>
                    <div class="td w25 tac">接口{{e}}</div>
                  </li>
                </swiper-slide>
              </swiper>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Swiper,
    SwiperSlide,
    directive
  } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.min.css'

  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  require('echarts/lib/component/tooltip')   // tooltip组件
  require('echarts/lib/component/title')   //  title组件
  require('echarts/lib/component/legend')  // legend组件

  export default {
    name: "Index",
    components: {
      Swiper,
      SwiperSlide
    },
    directives: {
      swiper: directive
    },
    data() {
      return {
        cur_time: '',
        swiperOption: {
          loop: false, //循环
          freeMode: true,
          slidesPerView: 2.5,
          spaceBetween: 10,
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",
        },
        swiperOptionbox1:{
          loop: false,
          notNextTick: true,
          direction: "vertical",
          slidesPerView: 'auto',
        },

        serviceOptions: [{
            name: '磁盘',
            prog: '60%'
          },
          {
            name: '内存',
            prog: '30%'
          },
          {
            name: 'CPU',
            prog: '100%'
          },
        ],

        optionDay: {
          color: ['#2699F9', '#5AD8A6', '#E58572'],
          legend: {
            data: ['客户端', 'APP', '微信'],
            right: 30,
            itemWidth: 12,
            itemHeight: 5,
            icon: 'line',
            itemGap: 20,
            textStyle: {
              fontWeight: 400,
              fontSize: 12,
              color: '#FFFFFF',
            },
            inactiveColor:"#CCC", //点击标签时关闭的颜色
          },
          symbol: ['none', 'none'], //去掉箭头
          xAxis: {
            type: 'category',
            data: ['11-01', '11-03', '11-05', '11-07', '11-09', '11-11', '11-13', '11-15', '11-17', '11-19', '11-21', '11-23', '11-25'],   // x轴数据
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.6)',
                type: 'solid',
                width: '1',
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontWeight: 400,
                fontSize: 12,
                // interval: 1,
              },
            },
          },
          yAxis: {
            type: 'value',
            data: ['0', '50', '100', '150', '200', '250'],  // y轴数据
            axisLine: {show:false},
            axisTick: {show:false},
            splitLine:{
              lineStyle:{
                type: 'solid',
                color: 'rgba(255, 255, 255, 0.1)',
              }
            },
            /*
            min: 0,
            max: 250,
            splitNumber: 6,
            */
            // 这里等分0~250,因为等分时高度不变,看起来不好看,所以注释了
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontWeight: 400,
                fontSize: 12,
              },
            },
          },
          label: {},
          tooltip: {
            trigger: 'axis'
          },
          series: [
            {
              name: '客户端',
              data: [150, 20, 45, 40, 70, 100, 150, 20, 45, 40, 70, 100, 150],
              type: 'line'
            },
            {
              name: 'APP',
              data: [50, 71, 83, 34, 45, 56, 178, 71, 83, 34, 45, 56, 178],
              type: 'line'
            },
            {
              name: '微信',
              data: [12, 90, 140, 160, 190, 123, 132, 90, 140, 160, 190, 123, 132],
              type: 'line'
            }
          ]
        },

        optionHour: {
          color: ['#2699F9', '#5AD8A6', '#E58572'],
          legend: {
            data: ['客户端', 'APP', '微信'],
            // x: 'right',
            right: 30,
            itemWidth: 12,
            itemHeight: 5,
            icon: 'line',
            itemGap: 20,
            textStyle: {
              fontWeight: 400,
              fontSize: 12,
              color: '#FFFFFF',
            },
            inactiveColor:"#CCC",
          },
          symbol: ['none', 'none'],//去掉箭头
          xAxis: {
            type: 'category',
            data: ['1:00', '3:00', '5:00', '7:00', '9:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00'],   // x轴数据
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.6)',
                type: 'solid',
                width: '1',
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontWeight: 400,
                fontSize: 12,
                // interval: 1,
              },
            },
          },
          yAxis: {
            type: 'value',
            data: ['0', '50', '100', '150', '200', '250'],  // y轴数据
            axisLine: {show:false},
            axisTick: {show:false},
            splitLine:{
              lineStyle:{
                type: 'solid',
                color: 'rgba(255, 255, 255, 0.1)',
              }
            },
            /*
            min: 0,
            max: 250,
            splitNumber: 6,
            */
            // 这里等分0~250,因为等分时高度不变,看起来不好看,所以注释了
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',//坐标值得具体的颜色
                fontWeight: 400,
                fontSize: 12,
              },
            },
          },
          label: {},
          tooltip: {
            trigger: 'axis'
          },
          series: [
            {
              name: '客户端',
              data: [150, 20, 45, 40, 70, 100, 150, 20, 45, 70, 100, 150],
              type: 'line'
            },
            {
              name: 'APP',
              data: [50, 71, 83, 34, 45, 56, 178, 71, 83, 34, 56, 178],
              type: 'line'
            },
            {
              name: '微信',
              data: [12, 90, 140, 160, 190, 123, 132, 90, 160, 190, 123, 132],
              type: 'line'
            }
          ]
        },

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.timer = setInterval(() => {
          this.cur_time = this.timeFunc();
        }, 1000)
        this.drawPieChart();
      })
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
      swbox1() {
        return this.$refs.swiperbox1.$swiper;
      },
    },
    methods: {
      timeFunc() {
        let curr_time = new Date();
        let year = curr_time.getFullYear(),
          month = (curr_time.getMonth() + 1 < 10 ? '0' + (curr_time.getMonth() + 1) : curr_time.getMonth() + 1),
          day = curr_time.getDate() < 10 ? '0' + curr_time.getDate() : curr_time.getDate(),
          hour = curr_time.getHours() < 10 ? '0' + curr_time.getHours() : curr_time.getHours(),
          min = curr_time.getMinutes() < 10 ? '0' + curr_time.getMinutes() : curr_time.getMinutes(),
          time = year + '-' + month + '-' + day + ' ' + hour + ':' + min;
        return time;
      },
      drawPieChart(){
        let ChartDay = echarts.init(document.getElementById('myChartDay'));
        let ChartHour = echarts.init(document.getElementById('myChartHour'));
        ChartDay.setOption(this.optionDay);
        ChartHour.setOption(this.optionHour);
      },
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      } else {
        console.log('wo zai');
      }
    }
  }
</script>

<style scoped lang="stylus">
  .mb2{
    margin-bottom: .2rem;
  }
  .container {
    background-color: #00062D;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    .tac{
      text-align: center;
    }

    .header {
      position: relative;
      height: 1rem;

      .pic {
        width: 100%;
        height: 100%;
      }

      .desc {
        position: absolute;
        display: flex;
        justify-content space-between;
        align-items center;
        left: .2rem;
        right: .2rem;
        bottom: 0;
        padding-right: 15px;

        .logo {
          width: 1.6rem;
          height: .5rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .time {
          // font-size: 20px;
          font-size: 1.667em;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }

    .content {
      margin-top: .2rem;
      padding: 0 0.2rem;
      box-sizing border-box;
      display: flex;
      justify-content space-between;

      .section {
        .group {
          position: relative;
          z-index 1;
          // padding: 20px 15px;
          padding: .2rem .15rem;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;

          .poa-src {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            left: 0;
            top: 0;
          }

          .title {
            // font-size: 20px;
            font-size: 1.667em;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            padding-left: 10px;
            display: flex;
            align-items center;
            height: .35rem;

            .line {
              width: .04rem;
              height: .25rem;
              background: #05DEED;
              border-radius: 3px;
              margin-right: 10px;
            }
          }

          .boxtable {
            .list {
              .list-item {
                // font-size: 16px;
                font-size: 1.333em;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                display: flex;
                align-items center;
                justify-content space-between;
                // height: 40px;
                // line-height: 40px;
                padding: 0 10px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                .td {
                  te_now();
                  padding: 0 5px;
                  -webkit-box-sizing: border-box;
                  -moz-box-sizing: border-box;
                  box-sizing: border-box;

                  &.w30 {
                    width: 30%;
                  }

                  &.w50 {
                    width: 50%;
                  }

                  &.w25 {
                    width: 25%;
                  }

                  &.w15 {
                    width: 15%;
                  }

                  &.w75 {
                    width: 75%;
                  }

                  &.w20 {
                    width: 20%;
                  }

                }

                &.tr:hover {
                  opacity: .7;
                  cursor: pointer;
                }
              }
/*
              &.tbody_red {
                .list-item.tr:nth-child(odd) {
                  background-color: rgba(#D15253, .3);
                }
              }
              &.tbody_blue {
                .list-item.tr:nth-child(odd) {
                  background-color: rgba(#3364BF, .2);
                }
              }
              */

              >>>.swiper-container{
                width: 100%;
                height: 100%;
              }
            }
          }
          .myChart{
            width: 100%;
            height: 100%;
          }
        }

      }

      .left {
        width: 4.5rem;
        .g1{
          width: 100%;
          height: 4.5rem;
        }
        .g4{
          // height: 5.9rem;
          height calc(100vh - 5.9rem);
          .boxtable{
            // height: 5.15rem;
            height calc(100vh - 6.65rem);
          }
          .list-item.th{
            height: .4rem;
            line-height: .4rem;
          }
          >>>.swiper-slide{
            height: .35rem;
            line-height: .35rem;
            &:nth-child(odd){
              background-color: rgba(#3364BF, .2);
            }
          }
          .tbody_blue{
            height: 4.75rem;
            height calc(100% - .4rem);
            overflow: hidden;
          }
        }
        .boxstyle {
          display: flex;
          flex-wrap wrap;
          justify-content space-between;
          height: 100%;

          .box {
            width: 48.5%;
            height: 48.5%;
            margin-top: 3%;
            background: rgba(51, 100, 191, 0.2);
            padding: 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            display: flex;
            flex-direction column;
            justify-content center;
            align-items center;

            &:nth-child(1) {
              margin-top: 0;
            }

            &:nth-child(2) {
              margin-top: 0;
            }

            .titlep {
              // font-size: 16px;
              font-size: 1.333em;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }

            .num {
              // font-size: 26px;
              font-size: 2.167em;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #11E8C5;
              margin: 10px 0;
            }

            .compare {
              // font-size: 14px;
              font-size: 1.1667em;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #FFFFFF;

              .arrow-icon {
                height: 10px;
                &.up{
                  -webkit-transform: rotate(180deg);
                  -moz-transform: rotate(180deg);
                  -ms-transform: rotate(180deg);
                  -o-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
              }
            }
          }
        }
      }

      .center {
        // width: 48%;
        width calc(100% - 9.5rem)
        .g2{
          height: 2.8rem;
        }
        .g3{
          // height: 3.7rem;
          height: calc((100vh - 4.4rem) / 2);
          // height: 50%;
        }

        .detail {
          .dt-box {
            margin-top: .2rem;
            width: 100%;
            height: 1.64rem;
            background: rgba(51, 100, 191, 0.2);
            margin-right: 10px;
            padding: .15rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            justify-content space-between;
            align-items center;
            cursor: pointer;

            .fl {
              text-align: center;
              margin-right: 10px;
              max-width: 1rem;

              .ser-pic {
                width: .68rem;
              }

              .desc {
                margin-top: 10px;
                // font-size: 14px;
                font-size: 1.1667em;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                overflow: hidden;
                text-overflow ellipsis;
                white-space nowrap;
                width: 100%;
              }
            }

            .fr {
              width: 100%;

              .part {
                display: flex;
                width: 100%;
                margin-top: 20px;

                .text {
                  width: 45px;
                  // font-size: 12px;
                  font-size: 1em;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  padding-right: 5px;
                  overflow: hidden;
                  text-overflow ellipsis;
                  white-space nowrap;
                }

                .main-pro {
                  width: 100%;
                  width: calc(100% - 60px);
                  height: .2rem;
                  border-radius: 0px 20px 20px 0;
                  border: 1px solid #2E9DF9;
                  background-color: $combg;

                  .progress {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;

                    .span {
                      width: 0px;
                      height: 100%;
                      // font-size: 10px;
                      font-size: 1em;
                      border-radius: 0px 20px 20px 0;
                    }

                    &.pro1 .span {
                      animation: move 1s ease-in-out forwards;
                      overflow: hidden;

                      .bgc {
                        background-image: linear-gradient(to right, #26D1FF, #03F6A2);
                        width: 100%;
                        height: 100%;
                      }
                    }
                  }
                }

                .shownum {
                  // font-size: 12px;
                  font-size: 1em;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  margin-left: 10px;
                  width: 32px;
                }

                &.part1 {
                  margin-top: 0;
                }

                &.part3 {
                  .main-pro {
                    border: 1px solid #E58572;

                    .pro1 .span {
                      .bgc {
                        background-image: linear-gradient(to right, #EA8889, #D05051);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .right {
        width: 4.5rem;
        height: calc(100vh - 1.4rem);
        .g5{
          // height: 5.2rem;
          height: 50%;
          .boxtable{
            // height: 4.45rem;
            height: calc(100% - 0.35rem);
          }
          .list-item.th{
            height: .4rem;
            line-height: .4rem;
          }
          .swp{
            // height: 4.05rem;
            height calc(100% - .4rem);
            overflow: hidden;
            &.tbody_red{
              >>>.swiper-slide{
                height: .35rem;
                line-height: .35rem;
                &:nth-child(odd){
                  background-color: rgba(#D15253, .2);
                }
              }
            }
            &.tbody_blue{
              >>>.swiper-slide{
                height: .35rem;
                line-height: .35rem;
                &:nth-child(odd){
                  background-color: rgba(#3364BF, .2);
                }
              }
            }
          }
        }
      }
    }
  }

  @keyframes move {
    from {
      width: 0px;
    }

    to {
      width: 100%;
    }
  }
  @-moz-keyframes move {
    from {
      width: 0px;
    }

    to {
      width: 100%;
    }
  }
  @-webkit-keyframes move {
    from {
      width: 0px;
    }

    to {
      width: 100%;
    }
  }
  @-o-keyframes move {
    from {
      width: 0px;
    }

    to {
      width: 100%;
    }
  }
</style>
